{extend name="common/base" /}
{block name="content"}
    <div class="iframe_div layui-anim layui-anim-upbit">
        <div class="top_btn_tool">
            {if power('role_create','创建角色','role')}
            <button class="layui-btn" data-type="create_btn">新增</button>
            {/if}
        </div>
        <div class="clear"></div>
        <div class="table_div">
            <table class="layui-hide" id="table_list" lay-filter="table_list"></table>
        </div>
    </div>
{/block}
{block name="script"}
<script>
    layui.config({
        base: '<?php echo SITE;?>static/layuiadmin/'
    }).extend({
        index: 'lib/index'
    }).use(['index','layer','table','form'],async () => {
        const { layer,form, admin, table, $,element } = layui;

        /*渲染表格*/
        let table_list = table.render({
            elem: '#table_list'
            ,url:'/admin/role/list_data'
            ,page:true
            ,limit:15
            ,cols: [[
                {field:'id',width:80,  title: 'ID'}
                ,{field:'name',  title: '名称'}
                ,{toolbar: '#barDemo',width:180, title: '操作'}
            ]]
        });

        /*监听表格动作*/
        table.on('tool(table_list)',async function(obj){
            let data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么',async function(index){
                    let res = await admin.delete('/admin/role/'+data.id);
                    if(res.status){
                        sync_data();
                        layer.close(index);
                    }
                });
            } else if(obj.event === 'edit'){
                clean_data(data);
                layer.open({
                    type: 1
                    , title: '编辑'
                    , area: ['400px']
                    , maxmin: true
                    , shade: 0.6
                    , content: $('#create_op')
                });
            } else if(obj.event === 'power'){
                let res = await admin.get('/admin/role/'+data.id);
                render_checkbox(res.data,data.id);
                layer.open({
                    type: 1
                    , title: '授权'
                    , area: ['750px']
                    , maxmin: true
                    , shade: 0.6
                    , content: $('#permission_list_op')
                });
            }
        });

        /*重载表格*/
        function sync_data(){
            table_list.reload();
        }

        /*清理数据*/
        function clean_data(data){
            form.val('op_form', {
                "name":  data?data.name:'',
                "id":  data?data.id:''
            });
        }

        /*渲染checkbox*/
        function render_checkbox(data,role_id){
            let $checkboxDiv = $('#checkbox_div');
            $checkboxDiv.html('');
            for (let i=0;i<data.length;i++){
                let has = '';
                if(data[i].has){
                    has = `checked=""`;
                }
                $checkboxDiv.append(`<input type="checkbox" name="${data[i].name}" ${has} lay-skin="primary" role="${role_id}" lay-id="${data[i].id}" lay-filter="power" title="${data[i].display_name}">`)
            }
            for(let key in data){
                $checkboxDiv.append(`<fieldset id="${key}">
            <legend>${key}</legend></fieldset>`)
                for (let i=0;i<data[key].length;i++){
                    let has = '';
                    if(data[key][i].has){
                        has = `checked=""`;
                    }
                    $("#"+key).append(`<input type="checkbox" name="${data[key][i].name}" ${has} lay-skin="primary" role="${role_id}" lay-id="${data[key][i].id}" lay-filter="power" title="${data[key][i].display_name}">`)
                }
            }
            form.render();
        }

        /*监听权限*/
        form.on('checkbox(power)',async function(data){
            let dom = $(data.elem);
            let checked = data.elem.checked;
            let role = dom.attr('role');
            let id = dom.attr('lay-id');
            await admin.put('/admin/role/permission/'+role,{check:checked,id:id});
        });

        /*监听提交*/
        form.on('submit(save_sub)', function(data){
            data =data.field;
            let type = 'POST';
            let url = '/admin/role';
            if(data.id){
                type = 'PUT';
                url = '/admin/role/'+data.id;
            }

            $.ajax({
                type: type,
                url: url,
                data: data,
                datatype: 'json',
                success: function (res) {
                    if (res.status) {
                        layer.closeAll();
                        sync_data();
                    }
                    layer.msg(res.msg);
                }
            });
            return false;
        });



        /*监听按钮动作*/
        $('.top_btn_tool .layui-btn').on('click', function(){
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        let active = {
            create_btn:function (){
                clean_data();
                layer.open({
                    type: 1
                    , title: '新增'
                    , area: ['400px']
                    , maxmin: true
                    , shade: 0.6
                    , content: $('#create_op')
                });
            },
        }
    });
</script>
{/block}


{block name="template"}
{include file="role/template" /}
{/block}